<template>
	<view>
		<view class="body" style=" max-width:640px; overflow:auto; overflow-x:hidden">
			<dfHeader :isIndex='false'></dfHeader>
			<div class='content1 grey'>

				<section class="index_st7 clearfix mt10">
					<div class="index_st7_ct1" title="中国槟榔网新闻">新闻</div>
					<div class="index_st7_ct2" @tap="goPage('xinwen')">更多</div>
					<div class="index_st7_ct3"><i class="jiantou-right"></i></div>
					<div class="index_st7_ct4">
						<div class="line"></div>
					</div>
				</section>
				<section class="index_st12 clearfix ">
					<div class="index_st12_all mt10" v-for="(data,i) in dataList.xinwen" @tap="goDetail(data)">
						<div class="index_st12_ct1"><img :src="data.pic!=''?config.staticUrl+data.pic:config.no_pic" /></div>
						<div class="index_st12_ct2">
							<div class="new_title">{{data.title}}</div>
							<div class="new_cont">{{data.subs}}</div>
						</div>
					</div>
				</section>

				<section class="index_st7 clearfix mt10">
					<div class="index_st7_ct1" title="中国槟榔网新品">新品推荐</div>
					<div class="index_st7_ct2" @tap="goPage('chanpin')">更多</div>
					<div class="index_st7_ct3"><i class="jiantou-right"></i></div>
					<div class="index_st7_ct4">
						<div class="line"></div>
					</div>
				</section>

				<section class="newshop">
					<ul>
						<li v-for="(data,i) in dataList.chanpin">
							<a @tap="goDetail(data)">
								<div class='img'><img :src="config.staticUrl+data.pic" :alt="data.title" title="中国槟榔网"></div>
								<h3>{{data.title}}</h3>
								<p>{{data.subs}}</p>
							</a>
						</li>
					</ul>
				</section>

				<section class="index_st1 clearfix mt10" @tap="">
					<img :src="config.staticImgUrl+ 'online/pic1.jpg'" />
				</section>

				<section class="index_st7 clearfix mt10">
					<div class="index_st7_ct1" title="中国槟榔网招商加盟">招商加盟</div>
					<div class="index_st7_ct2" @tap="goPage('zhaoshang')">更多</div>
					<div class="index_st7_ct3"><i class="jiantou-right"></i></div>
					<div class="index_st7_ct4">
						<div class="line"></div>
					</div>
				</section>
				<section class="jion">
					<ul>
						<li v-for="(data,i) in dataList.zhaoshang">
							<div class="img">
								<a @tap="goDetail(data)">
									<img :src="config.staticUrl+data.pic" :alt="data.title" />
								</a>
							</div>
							<div class="txt"><a @tap="goDetail(data)">
									<strong><em>{{i+1}}</em>{{data.title}}</strong></a>
								<p>{{data.subs}}</p>
								<div class="btn">
									<a class="red" href="https://tb.53kf.com/code/client/10165948/1" target="_blank">在线咨询</a>
									<a @tap="goDetail(data)">查看详情</a>
								</div>
							</div>
						</li>
					</ul>
				</section>

				<section class="index_st7 clearfix mt10">
					<div class="index_st7_ct1" title="中国槟榔网曝光闻">曝光</div>
					<div class="index_st7_ct2" @tap="goPage('baoguang')">更多</div>
					<div class="index_st7_ct3"><i class="jiantou-right"></i></div>
					<div class="index_st7_ct4">
						<div class="line"></div>
					</div>
				</section>
				<section class="index_st9 clearfix ">
					<div class="index_st9_li" v-for="(data,i) in dataList.baoguang" @tap="goDetail(data)">
						<div class="goods_st4_li">
							<div class="wd relative bxz">
								<div class="goods_st4_li_ct1"><img :src="data.pic!=''?config.staticUrl+data.pic:config.no_pic" /></div>
								<div class="goods_st4_li_ct2 text_overflow">{{data.title}}</div>
							</div>
						</div>
					</div>
				</section>

				<section class="index_st7 clearfix mt10">
					<div class="index_st7_ct1" title="中国槟榔网视频">视频</div>
					<div class="index_st7_ct2" @tap="goPage('shipin')">更多</div>
					<div class="index_st7_ct3"><i class="jiantou-right"></i></div>
					<div class="index_st7_ct4">
						<div class="line"></div>
					</div>
				</section>

				<section class='video_list'>
					<ul>
						<li v-for="(data,i) in dataList.shipin" class='video' @tap="play(i)">
							<div class='video_box'>
								<video :id="'v'+i" controls="controls" :show-center-play-btn='false' :show-play-btn="false" :src="config.staticUrl+data.video"
								 :poster="data.pic!=''?config.staticUrl+data.pic:config.no_pic" controlsList="nodownload"></video>
								</video>
								<div class='video_play_box'>
									<div class='icon'>
										<div class='play'></div>
									</div>
								</div>
								<div class='video_pause_box'>
									<div class='icon'>
										<div class='play'></div>
									</div>
								</div>
							</div>
							<div class='video_info'>
								<h3>{{data.title}}</h3>
								<p>{{data.subs}}</p>
							</div>
						</li>
					</ul>
				</section>

				<!-- <section class="index_st9 clearfix ">
					<div class="index_st9_li" v-for="(data,i) in dataList.shipin" @tap="goDetail(data)">
						<div class="goods_st4_li">
							<div class="wd relative bxz">
								<div class="goods_st4_li_ct1"><img :src="data.pic!=''?config.staticUrl+data.pic:config.no_pic" /></div>
								<div class="goods_st4_li_ct2 text_overflow">{{data.title}}</div>
							</div>
						</div>
					</div>
				</section> -->

				<section class="index_st1 clearfix mt10" @tap="">
					<img :src="config.staticImgUrl+ 'online/pic2.jpg'" title="中国槟榔网" />
				</section>

				<section class="index_st7 clearfix mt10">
					<div class="index_st7_ct1" title="中国槟榔网品牌">品牌推荐</div>
					<div class="index_st7_ct2" @tap="goPage('pinpai')">更多</div>
					<div class="index_st7_ct3"><i class="jiantou-right"></i></div>
					<div class="index_st7_ct4">
						<div class="line"></div>
					</div>
				</section>
				<section class="index_st13 clearfix">
					<div class="index_st13_all">
						<div class="index_st13_li mt10" v-for="(data,i) in dataList.pinpai" @tap="goDetail(data)">
							<div class="index_st13_ct3"><img :src="data.pic!=''?config.staticUrl+data.pic:config.no_pic" /></div>
							<div class="index_st13_ct1 text_overflow">{{data.title}}</div>
						</div>
					</div>
				</section>
				<section class="index_st7 clearfix mt10">
					<div class="index_st7_ct1">标签</div>
					<div class="index_st7_ct4">
						<div class="line"></div>
					</div>
				</section>
				<section class="index_st17 clearfix">
					<div class='tag-index'><a @tap="goTag(data)" v-for="(data,i) in dataList.tags">{{data}}</a></div>
				</section>
				<section class="index_st7 clearfix mt10">
					<div class="index_st7_ct1">友情链接</div>
					<div class="index_st7_ct4">
						<div class="line"></div>
					</div>
				</section>
				<section class="index_st17 clearfix">
					<a :href='data.src' target='_blank' v-for="(data,i) in config.links">{{data.title}}</a>
				</section>
				<dfFooter></dfFooter>
			</div>
		</view>
		<df-form-phone :showIcon="false" :open="openFormStatusPhone"></df-form-phone>
	</view>
</template>
<script>
	import $ from "@/static/js/jquery-2.1.1.min.js";
	export default {
		components: {},
		data() {
			return {
				openFormStatusPhone: false,
				loading: true,
				dataList: {},
				// 当前菜单id
				tabId: "shouye",
				config: this.$config,
				item: []
			}
		},
		onLoad() {
			console.log(this.tabId + ' onLoad')
			// this.dataList = {xinwen:this.config.test}
			this.getList();
			this.$functions.setPageData(this.tabId);

		},
		onReady() {
			console.log(this.tabId + ' onReady');
			var _this = this;
			setTimeout(function() {
				_this.loading = false;
			}, 500)

		},
		onInit() {
			console.log(this.tabId + ' onInit')
		},
		onShow() {
			console.log(this.tabId + ' onShow')
		},
		onResize() {
			// App、小程序
			console.log(this.tabId + ' onResize')
		},
		methods: {
			goTag(str) {
				this.$Router.push({
					name: 'tags',
					params: {
						search: str
					}
				})
			},
			play(i) {
				console.log(i);
				console.log(this.item)
				var video = document.querySelectorAll('video') //获取页面中所有duvideo
				if (this.item[i]) {
					console.log('pause');
					$('#v' + i).next().next().show();
					video[i].pause() //让当zhuan前点击shu的video播放					
					this.item[i] = false;
				} else {
					console.log('play');
					for (let v = 0; v < video.length; v++) {
						video[v].pause() //让上一个video暂停zhi
						this.item[v] = false;
						$('#v' + v).next().show();
						$('#v' + v).next().next().hide();
					}
					video[i].play() //让当zhuan前点击shu的video播放
					this.item[i] = true;
					$('#v' + i).next().hide();
					$('#v' + i).next().next().hide();
				}
			},
			openFormPhone() {
				// 轮流切换open值，触发模板里的watch函数
				this.openFormStatusPhone = this.openFormStatusPhone ? false : true;
				console.log('openFormPhone');
			},
			// 获取数据列表
			getList() {
				let _this = this;
				var data = {
					pageSize: 8,
					minId: 0,
					typeId: this.tabId
				};
				this.$request.api_request('pl_list', data).then(function(data) {					
					_this.dataList = data.result;
					// 取消刷新图标
					uni.stopPullDownRefresh();
				})
			},
			goDetail: function(e) {
				var _this = this;
				// console.log(e);
				var phoneVerify = this.$functions.getCache('phoneVerify');
				phoneVerify.then(function(x) {
					console.log("phoneVerify:" + x)
					var type = e.typeId;
					if (x || type != 'baoguang')
						_this.$functions.goDetail(e, _this);
					else
						_this.openFormPhone();

				})
			},
			goPage: function(e) {
				var _this = this;				
				var phoneVerify = this.$functions.getCache('phoneVerify');
				phoneVerify.then(function(x) {
					// console.log("phoneVerify:" + x)
					if (!x && e == "baoguang")
						_this.openFormPhone();
					else
						_this.$functions.goPage("/" + e)
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/css/online/index.scss';
</style>
